<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>书写测试</title>
  <style>
    .test{
      width: 100px;
      height: 100px;
      cursor: pointer;
      clip-path: polygon(50% 0px, 100% 25%, 75% 100%, 25% 100%, 0px 25%);
    }
a[href^="http://"]{ 
  padding-right: 20px; 
  background: url(external.gif) no-repeat center right; 
}
a[href^="mailto:"]{ 
  padding-right: 20px; 
  background: url(email.png) no-repeat center right; 
}
a[href$=".pdf"]{ 
  padding-right: 20px; 
  background: url(pdf.png) no-repeat center right; 
}
.test0{
  width:960px; 
  margin:0 auto;
}
.mask{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0,0,0,0.6);
}
.bg{ 
  background: url(image_1.png) top left no-repeat, 
  url(image_2.png) bottom left no-repeat, 
  url(image_3.png) bottom right no-repeat;
/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
color: transparent; 
text-shadow: 0 0 5px rgba(0,0,0,0.5); 
}
  </style>
</head>
<body>
  <div class="test"></div>
<table>
  <thead>
    <th>标题0</th>
    <th>标题2</th>
    <th>标题3</th>
  </thead>
  <tbody>
    <tr>
      <td>内容0</td>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td span="3">footer</td>
    </tr>
  </tfoot>
</table>
<ul>
  <li>1689</li>
</ul>
https://www.ruanyifeng.com/blog/2019/06/responsive-images.html
<img srcset="foo-320w.jpg,
             foo-480w.jpg 1.5x,
             foo-640w.jpg 2x"
     src="foo-640w.jpg">
<img srcset="foo-160.jpg 160w,
             foo-320.jpg 320w,
             foo-640.jpg 640w,
             foo-1280.jpg 1280w"
     sizes="(max-width: 440px) 100vw,
            (max-width: 900px) 33vw,
            254px"
     src="foo-1280.jpg">
<picture>
<source srcset="homepage-person@desktop.png,
                homepage-person@desktop-2x.png 2x"       
        media="(min-width: 990px)">
<source srcset="homepage-person@tablet.png,
                homepage-person@tablet-2x.png 2x" 
        media="(min-width: 750px)">
<img srcset="homepage-person@mobile.png,
              homepage-person@mobile-2x.png 2x" 
      alt="Shopify Merchant, Corrine Anestopoulos">
</picture>
<picture>
  <source type="image/svg+xml" srcset="logo.xml">
  <source type="image/webp" srcset="logo.webp"> 
  <img src="logo.png" alt="ACME Corp">
</picture>
  <script>
    /**
     * @description 加法精确计算，避免数据相加小数点后产生多位数和计算精度损失
     * @param { Number } num1 加数1
     * @param { Number } num2 加数2
     * @return { Number } 相加结果
     */
    function numAdd(num1, num2) {
      var baseNum = 0,
          baseNum1 = 0,
          baseNum2 = 0;
      try {
        baseNum1 = num1.toString().split(".")[1].length;
      } catch (e) {
        baseNum1 = 0;
      }
      try {
        baseNum2 = num2.toString().split(".")[1].length;
      } catch (e) {
        baseNum2 = 0;
      }
      baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
      return (num1 * baseNum + num2 * baseNum) / baseNum;
    }

    /**
     * @description 减法精确计算，避免数据相减小数点后产生多位数和计算精度损失
     * @param { Number } num1 被减数
     * @param { Number } num2 减数2
     * @return { String } 相减结果
     */
    function numSub(num1, num2) {
      var baseNum = 0,
          baseNum1 = 0,
          baseNum2 = 0;
      var precision = 0; // 精度
      try {
        baseNum1 = num1.toString().split(".")[1].length;
      } catch (e) {
        baseNum1 = 0;
      }
      try {
        baseNum2 = num2.toString().split(".")[1].length;
      } catch (e) {
        baseNum2 = 0;
      }
      baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
      precision = baseNum1 >= baseNum2 ? baseNum1 : baseNum2;
      return ((num1 * baseNum - num2 * baseNum) / baseNum).toFixed(precision);
    }

    /**
     * @description 乘法精确计算，避免数据相乘小数点后产生多位数和计算精度损失
     * @param { Number } num1 被乘数
     * @param { Number } num2 乘数
     * @return { Number } 相乘结果
     */
    function numMulti(num1, num2) {
      var baseNum = 0;
      try {
        baseNum += num1.toString().split(".")[1].length;
      } catch (e) {}
      try {
        baseNum += num2.toString().split(".")[1].length;
      } catch (e) {}
      return Number(num1.toString().replace(".", "")) * Number(num2.toString().replace(".", "")) / Math.pow(10, baseNum);
    }

    /**
     * @description 除法精确计算，避免数据相除小数点后产生多位数和计算精度损失
     * @param { Number } num1 被除数
     * @param { Number } num2 除数2
     * @return { Number } 相除结果
     */
    function numDiv(num1, num2) {
      var t1 = 0,
          t2 = 0,
          r1 = 0,
          r2 = 0;
      try {
        t1 = num1.toString().split(".")[1].length;
      } catch (e) {}
      try {
        t2 = num2.toString().split(".")[1].length;
      } catch (e) {}
      r1 = Number(num1.toString().replace(".", ""));
      r2 = Number(num2.toString().replace(".", ""));
      return r1 / r2 * Math.pow(10, t2 - t1);
    }

/**
 * @description 时间戳转日期
 * @param { Number, String } timestamp 时间戳
 * @param { String } fmt 转换后的日期格式，如："yyyyMMdd"、"yyyy/MM/dd"、"yyyy-MM-dd hh:mm:ss"、"yyyy年MM月dd日"、"yyyy-MM-dd"等等
 * @return { String } 转换后的日期
 */
function timestampToTime(timestamp, fmt) {
  var date = new Date(parseInt(timestamp));
  var obj = {
    "M+": date.getMonth() + 1, // 月
    "d+": date.getDate(), // 日
    "h+": date.getHours(), // 时
    "m+": date.getMinutes(), // 分
    "s+": date.getSeconds(), // 秒
    "q+": Math.floor((date.getMonth() + 3) / 3), // 季度
    S: date.getMilliseconds() // 毫秒
  };
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
  }
  for (var i in obj) {
    if (new RegExp("(" + i + ")").test(fmt)) {
      fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? obj[i] : ("00" + obj[i]).substr(("" + obj[i]).length));
    }
  }
  return fmt;
}

/**
 * @description url参数转对象
 * @param { String } url url地址
 * @return { Object } 转换后的对象
 */
function parseQueryString(url) {
  url = url == undefined ? window.location.href : url;
  var search = url.substring(url.lastIndexOf('?') + 1);
  if (!search) {
    return {};
  }
  return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}');
}

/**
 * @description 获取到某一个时间的倒计时对象
 * @param { String } endTime 结束时间
 * @return { Object } 倒计时
 */
function getCountTime(endTime) {
  var startDate = Date.now(); // 开始时间，当前时间
  var endDate = new Date(endTime); // 结束时间，需传入时间参数
  var t = endDate.getTime() - startDate; // 时间差的毫秒数
  var days = 0,
      hours = 0,
      minutes = 0,
      seconds = 0;
  if (t >= 0) {
    days = Math.floor(t / 1000 / 3600 / 24);
    hours = Math.floor(t / 1000 / 60 / 60 % 24);
    minutes = Math.floor(t / 1000 / 60 % 60);
    seconds = Math.floor(t / 1000 % 60);
  }
  return {
    days: days,
    hours: hours,
    minutes: minutes,
    seconds: seconds
  };
}

/**
 * @description 是否闰年
 * @param { Number } year 年份
 * @return { Boolean } 是否闰年
 */
function leapYear(year) {
  year = year === undefined ? new Date().getFullYear() : year;
  return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0;
}

/**
 * @description 随机生成颜色
 * @return { String } 生成颜色的十六进制
 */
function randomColor() {
  return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
}

/**
 * @description 数据类型判断
 * @param { Object } obj 要判断的数据对象
 * @param { String } type 数据类型
 * @return { Boolean } 是否为传入的数据类型
 */
function dataType(obj, type) {
  var _type = '';
  if (type) {
    _type = type.toLowerCase();
  }
  switch (_type) {
    case 'string':
      return Object.prototype.toString.call(obj) === '[object String]';
    case 'number':
      return Object.prototype.toString.call(obj) === '[object Number]';
    case 'boolean':
      return Object.prototype.toString.call(obj) === '[object Boolean]';
    case 'undefined':
      return Object.prototype.toString.call(obj) === '[object Undefined]';
    case 'null':
      return Object.prototype.toString.call(obj) === '[object Null]';
    case 'function':
      return Object.prototype.toString.call(obj) === '[object Function]';
    case 'array':
      return Object.prototype.toString.call(obj) === '[object Array]';
    case 'object':
      return Object.prototype.toString.call(obj) === '[object Object]';
    case 'nan':
      return isNaN(obj);
    case 'elements':
      return Object.prototype.toString.call(obj).indexOf('HTML') !== -1;
    default:
      return Object.prototype.toString.call(obj);
  }
}

/**
 * @description 数组去重
 * @param { Array } arr 要去重的数组
 * @return { Array } 去重后的数组
 */
function removeRepeatArr(arr) {
  return arr.filter(function (item, index, self) {
    return self.indexOf(item) === index;
  });
}

/**
 * @description 数组顺序随机打乱
 * @param { Array } arr 要打乱的数组
 * @return { Array } 打乱后的数组
 */
function upsetArr(arr) {
  return arr.sort(function () {
    return Math.random() - 0.5;
  });
}

/**
 * @description 是否微信内置浏览器，只能在浏览器中使用
 * @return { Boolean } 是否微信内置浏览器
 */
function isWeixin() {
  if (window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger') {
    return true;
  }
  return false;
}

/**
 * @description 获取某个月的天数
 * @param { Number } year 年
 * @param { Number } month 月
 * @return { Number } 某个月的天数
 */
 function dayOfMonth(year, month) {
  var date = new Date(year, parseInt(month), 0);
  return date.getDate();
}

/**
 * @description 获取操作系统类型
 * @return { String } 系统类型
 */
function getSystemType() {
  var userAgent = 'navigator' in window && 'userAgent' in navigator && navigator.userAgent.toLowerCase() || '';
  var appVersion = 'navigator' in window && 'appVersion' in navigator && navigator.appVersion.toLowerCase() || '';

  if (/mac/i.test(appVersion)) return 'MacOSX';
  if (/win/i.test(appVersion)) return 'windows';
  if (/linux/i.test(appVersion)) return 'linux';
  if (/iphone/i.test(userAgent) || /ipad/i.test(userAgent) || /ipod/i.test(userAgent)) 'ios';
  if (/android/i.test(userAgent)) return 'android';
  if (/win/i.test(appVersion) && /phone/i.test(userAgent)) return 'windowsPhone';
}

/**
 * @description 设置url参数
 * @param { Object } obj 设置参数的对象
 * @return { String } 参数的字符串
 */
 function getQueryStringFromObj(obj) {
  var _rs = [];
  for (var p in obj) {
    if (obj[p] != null && obj[p] != '') {
      _rs.push(p + '=' + obj[p]);
    }
  }
  return _rs.join('&');
}
  </script>
</body>
</html>